<template>
  <div class="box homeBox">
    <Banner :imgs="bannerList" :index="i">
      <template v-slot:[abc]="{a}">
        <button> &lt; </button>
        <button> &gt; </button>
        <p>组件外部在使用组件内部的：{{a}}</p>
      </template>
      <template #list>
        <div class="list">组件外部 - 点</div>
      </template>
    </Banner>
  </div>
</template>

<script>
import { getBanner } from '@/api/request.js'
import Banner from '@/components/Banner.vue'

export default {
  data () {
    return {
      bannerList: [],
      abc: 'btn'
    }
  },
  mounted () {
    getBanner().then(data => {
      this.bannerList = data.data.msg
      this.bannerList.length = 1
    })
  },
  components: {
    Banner
  }
}
</script>

<style lang="scss">
.homeBox{
  display: flex;
  flex-direction: column;
  overflow: auto;
  main{
    flex: 1;
    overflow: auto;
    .cont{
      height: 10rem;
    }
  }
}
</style>
